   mucusChartHeightPercentage = 0.7;   

   function firstShowMucusChartDetail(){
   		initMucusChartDetailZone();
   		showMucusChartDetail();
   }
   
   function initMucusChartDetailZone(){
   		window.onload = initMucusChartDetailStyle();
   }
   
   function initMucusChartDetailStyle(){
		var mucusChartDetailHeight = window.innerHeight * (1 - mucusChartHeightPercentage);
		var mucusChartDetailWidth = window.innerWidth;		
		
		/*设置主体显示div高度*/
		document.getElementById("detail_table").style.width = mucusChartDetailWidth + 'px';
		document.getElementById("detail_table").style.height = mucusChartDetailHeight + 'px';
		document.getElementById("periodDayNum_td").style.width = (mucusChartDetailWidth - mucusChartDetailHeight) / 2 + 'px';
		document.getElementById("periodDayNum_td").style.height = mucusChartDetailHeight + 'px';
		document.getElementById("periodDayTitle_td").style.width = (mucusChartDetailWidth - mucusChartDetailHeight) / 2 + 'px';
		document.getElementById("periodDayTitle_td").style.height = mucusChartDetailHeight + 'px';
		document.getElementById("detail_td").style.width = mucusChartDetailHeight + 'px';
		document.getElementById("detail_td").style.height = mucusChartDetailHeight + 'px';
		document.getElementById("detail_td").style.borderRadius = mucusChartDetailHeight / 2 + 'px';
		
		document.getElementById("heart").style.width = mucusChartDetailHeight / 10 + 'px';
		document.getElementById("moon").style.width = mucusChartDetailHeight / 10 + 'px';
		document.getElementById("drink").style.width = mucusChartDetailHeight / 10 + 'px';
		document.getElementById("medicine").style.width = mucusChartDetailHeight / 10 + 'px';
		document.getElementById("plane").style.width = mucusChartDetailHeight / 10 + 'px';		
   }

   function showMucusChartDetail(){
   		var latestValidDateStr = getLatestValidMucusDateStr(xAxisDateArray.toString());
   		
   		if(latestValidDateStr == "-")
   			latestValidDateStr = getCurrentDateStr();
   		
   		var latestValidMucus = customerDateMucusMap.get(latestValidDateStr);
   		showMucusChartDetailForEach(latestValidDateStr, latestValidMucus);
   }

   
   function showMucusChartDetailForEach(detailXAxisDayStr, mucus){   
   		showPeriodDayNum(detailXAxisDayStr);
   		showPeriodDayDetail(detailXAxisDayStr, mucus);
   		showPeriodDayTitleDetail(customerDatePeriodMap.get(detailXAxisDayStr));	    
   }   
   
   function showPeriodDayNum(detailXAxisDayStr){
   		document.getElementById('periodDayNum').innerHTML = getDaysFromPreviousYjqStartDate(detailXAxisDayStr);   		
   }
   
   
  
   function showPeriodDayDetail(detailXAxisDayStr, mucus){
   		showPeriodDayStateDetail(detailXAxisDayStr);
   		document.getElementById('detailMucus').innerHTML = getMucusStr(mucus);
	    document.getElementById('detailDate').innerHTML = getDetailDate(detailXAxisDayStr);
	    document.getElementById('detailDayOfWeek').innerHTML = getDetailDayOfWeek(detailXAxisDayStr);
   }
   
   function showPeriodDayTitleDetail(periodStr){
   		document.getElementById('periodDayTitle').src = setPeriodImageSrc(periodStr);
   }
   
   function getMucusStr(mucus){
	    var mucusStr = "-"; 

	   	switch(mucus){
	   		case "1":
	   			mucusStr = "无 干燥";
	   			break;
	   		case "2":
	   			mucusStr = "潮湿";
	   			break;
	   		case "3":
	   			mucusStr = "粘稠 乳脂状";
	   			break;
	   		case "4":
	   			mucusStr = "蛋清 水状";
	   			break;
	   	}
	   	
	   	return mucusStr;
   }